<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        body{
            background: url("/static/login.jpg");
            background-attachment: fixed;
            background-size: cover;
        }
        .native-text-shadow{
            text-shadow: 0 0 4px #55e9fc;
            margin-left: 280px;
        }
        .native-webkit-text-stroke{
            -webkit-text-stroke: 4px #32003c;
        }
    </style>
</head>
<body>
    <div style="text-align: center">
        <h1 style="color: white" class="native-text-shadow">
            <br>
            欢迎{{ username }}使用接口测试平台
        </h1>
        {#   中间这里放 超链接传送门     #}
        <div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
            <h3 style="color: #3e2935">欢迎使用传送门：</h3>
            <strong>
                    {% for i in hrefs  %}
                        <a href="{{ i.href }}">{{ i.name }}</a><br>
                    {% endfor %}
                    

            </strong>

        </div>

        <br>
        <div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
            <h3 style="color: #3e2935">您的项目：</h3>
            <span style="color: black">
            {#       这里存放后续的个人项目列表循环，类似传送门的套路 ,点击自己创建的项目可以直接进入项目内     #}


            </span>
            <br>
        </div>

        <br>
        <div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
            <h3 style="color: #3e2935">最新消息：</h3>
            <span style="color: black">
                帮助页面上线<br>
                更新内容：<br>
                1.可进入项目列表-新增项目-删除项目<br>
                2.进入单个项目内查看接口列表<br>
                3.新增接口功能-点击调试--填入数据--保存数据|可以保存备注<br>
                4.项目设置（名称、描述、其他管理员）<br>
                </span>
            <br>
        </div>

        <br>
        <div style="border: 1px solid black;border-radius: 10px 0px 0px 10px;text-align: center;background-color: #e3ffe3;opacity: 0.8;color: white;margin-left: 300px">
            <br>
            <textarea id="tucao_input" cols="50" rows="5" placeholder="匿名吐槽专用,点击 发送按钮即可反馈！"
                  style=";border-radius: 5px;padding-left: 10px;box-shadow: 4px 4px 9px grey"></textarea>
            <br>
            <button style="border-radius: 0px 0px 50px 50px;width: 100px" onclick="pei()">发送</button>
            <br><br>
        </div>
    </div>
    <script>
        function pei() {
            $.get("/pei/",{
                "tucao_text":document.getElementById('tucao_input').value,
                },function (ret){
                    alert('已成功吐槽！')
                })
        }
    </script>

</body>
</html>